<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-select
          v-model="query.areaCode"
          placeholder="请选择区域"
          :clearable="false"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-cascader
          clearable
          placeholder="请选择单位业态"
          v-model="bodyIndustryStr"
          :options="statusOptions"
          @change="onChange"
          :props="{
            checkStrictly: true,
             children:'list',
              label:'bodyIndustryRemarks',
              value:'bodyIndustryRemarks'
          }"
        ></el-cascader>
      </el-col>
  
      <el-col :span="4">
        <el-select
          v-model="query.position"
          placeholder="请选择职位状态"
        >
          <el-option
            v-for="item in [
               {
                value: '0',
                label: '申请入职',
              },
              {
                value: '1',
                label: '在职',
              },
                {
                value: '2',
                label: '职位状态',
              },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      
      <el-col :span="6">
        <el-date-picker
          unlink-panels
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="注册开始日期"
          end-placeholder="注册结束日期"
          value-format="yyyy-MM-dd"
          @change="onchange"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
         <el-col :span="5">
        <el-input
          maxlength="50"
          clearable
          v-model="query.searchValue"
          placeholder="请输入单位名称"
          style="width: 280px"
        ></el-input>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <el-row type="flex" align="middle">
    <el-col :span="2">
        <!-- <el-select
          v-model="query.isSpecialFood"
          placeholder="请选择特殊食品"
        >
          <el-option
            v-for="item in [
              {
                value: '1',
                label: '特殊食品',
              },
              {
                value: '0',
                label: '非特殊食品',
              },
              {
                value: '2',
                label: '全部',
              },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
  <el-checkbox v-model="query.isSpecialFood" true-label="1" false-label="2">特殊食品</el-checkbox>

      </el-col>
    <el-col :span="2">
           <el-checkbox
        v-model="query.islargerkitchen"
        :true-label="1"
        :false-label="0"
        >中央厨房</el-checkbox
      >
    </el-col>
      <!-- <el-checkbox
        v-model="query.isspecialmedicine"
        true-label="1"
        false-label="0"
        >特殊医学用途配方食品</el-checkbox
      > -->
          <el-col :span="4">
      <el-checkbox
        v-model="query.iscollectivedistribution"
        :true-label="1"
        :false-label="0"
        >集体用餐配送</el-checkbox
      >
          </el-col>
   
      <el-col :span="2">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="
            query.pageIndex = 1;
            getList();
          "
          v-no-click
          >查询</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button @click="download">导出Excel</el-button>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>
 



 <el-tabs v-model="query.groupingSorting" type="card" @tab-click="query.pageIndex = 1; getList();">
    <el-tab-pane label="按区域统计" name="1">
         <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="区域名称">
            <template slot-scope="scope">
              <div>
                {{scope.row.streetName||scope.row.areaName}}
              </div>
            </template>
         </el-table-column>
      <el-table-column prop="unitTotal" label="单位数"> </el-table-column>
      <el-table-column prop="employeeTotal" label="从业人员数"></el-table-column>
      <el-table-column prop="foodSafetyAdministrator" label="食品安全员数"></el-table-column>
      <el-table-column prop="greenTotal" label="绿码数"> </el-table-column>
      <el-table-column prop="yellowTotal" label="黄码数"> </el-table-column>
      <el-table-column prop="redTotal" label="红码数"> </el-table-column>
      <el-table-column prop="tobeImprovedTotal" label="待完善数"></el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="按单位业态统计" name="2">
         <el-table :data="tableData" border style="width: 100%"  :tree-props="{children:'samplingCompletionListResponseList'}"  row-key="id">
      <el-table-column prop="bodyIndustry" label="单位业态" width="220"> </el-table-column>
      <el-table-column prop="unitTotal" label="单位数"> </el-table-column>
      <el-table-column prop="employeeTotal" label="从业人员数"></el-table-column>
      <el-table-column prop="foodSafetyAdministrator" label="食品安全员数" ></el-table-column>
      <el-table-column prop="greenTotal" label="绿码数"> </el-table-column>
      <el-table-column prop="yellowTotal" label="黄码数"> </el-table-column>
      <el-table-column prop="redTotal" label="红码数"> </el-table-column>
      <el-table-column prop="tobeImprovedTotal" label="待完善数"></el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="按注册单位统计" name="0">
         <el-table :data="tableData" border style="width: 100%">
    
      <el-table-column  label="区域" width="180"> 
         <template slot-scope="scope"> <div >{{ scope.row.areaName}}--{{scope.row.streetName}}</div></template>
      </el-table-column>
      <el-table-column prop="bodyIndustryAndRemarks" label="单位业态"  width="220"> </el-table-column>

<!-- 统一社会信用代码、营业执照单位名称、许可证编号、许可证经营者名称 -->


   <el-table-column
              width="200"
              label="统一社会信用代码"
              prop="identify"
            ></el-table-column>
      <el-table-column prop="unitName" label="营业执照单位名称" width="220"> </el-table-column>

            <el-table-column
              label="许可证编号"
                          width="150"
              prop="newlicenseno">    
              <template slot-scope="scope"> <div >{{ scope.row.newLicenseNo||'--' }}</div></template></el-table-column>
 <el-table-column prop="operatorName" label="许可证经营者名称" width="220"> </el-table-column>

      <el-table-column prop="employeeTotal" label="从业人员数" width="100"></el-table-column>
      <el-table-column prop="foodSafetyAdministrator" label="食安管理员数" width="150"></el-table-column>
      <el-table-column prop="greenTotal" label="绿码数" width="80"> </el-table-column>
      <el-table-column prop="yellowTotal" label="黄码数" width="80"> </el-table-column>
      <el-table-column prop="redTotal" label="红码数" width="80"> </el-table-column>
      <el-table-column prop="tobeImprovedTotal" label="待完善数" width="80"></el-table-column>
    </el-table>
    <pagination :total="total" @pagination="getList" :page.sync="query.pageIndex" />

    </el-tab-pane>
  </el-tabs>






    <rz-height></rz-height>
    <rz-height></rz-height>
    <rz-height></rz-height>
  </div>
</template>
<script>
import { groupArea,findSysDicBusiness } from "@/api/modules/enterprise";
export default {
  created() {
    this.query.areaCode = this.$route.query.code || "320500000000";
    this.findAreaListNoParentByParentCode();
    this.getList();
    this.findSysDicBusiness()
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      total: 0,
      areaOptions: [],
      query: {
        areaCode: "",
        bodyIndustry: "",
        bodyIndustryRemarks: "",
        endDate: "",
        isPage: 0,
        isSpecialFood: "2",
        pageIndex: 1,
        pageSize: 10,
        searchValue: "",
        startDate: "",
        groupingSorting:"1",
        position:"2",
        iscollectivedistribution:0,
        islargerkitchen:0,
      },
      tableData: [],
      statusOptions: [],
      bodyIndustryStr: "",
      time: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  // 方法
  methods: {
           findSysDicBusiness(){
findSysDicBusiness().then((res) => {
        // this.optionsArea = [res.data];
        // console.log(res);
        this.statusOptions=res.data
      });
    },
    findAreaListNoParentByParentCode() {
      groupArea({
        params: this.query,
      }).then((res) => {
        this.areaOptions.push({
          label: res.data.areaName,
          value: res.data.areaCode,
        });
        res.data.children.forEach((item1) => {
          this.areaOptions.push({
            label: item1.areaName,
            value: item1.areaCode,
          });
        });
      });
    },
    getList() {
      console.log(this.query);
      this.$http.findSamplingCompletionNew(this.query).then((res) => {
         res.data.forEach((item) => {
             item.id = this.$_.uniqueId();
           if(item.samplingCompletionListResponseList){
               item.samplingCompletionListResponseList.forEach(x => {
                 x.bodyIndustry=x.bodyIndustryRemarks||'--'
                x.id = this.$_.uniqueId();
            });
           }
         })
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },
    onChange(e) {
      if (e.length == 2) {
        this.query.bodyIndustry = e[0];
        this.query.bodyIndustryRemarks = e[1];
      } else if (e.length == 1) {
        this.query.bodyIndustry = e[0];
        this.query.bodyIndustryRemarks = "";
      } else {
        this.query.bodyIndustry = "";
        this.query.bodyIndustryRemarks = "";
        this.bodyIndustryStr = "";
      }
    },
    onchange(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
        this.time = "";
      }
    },
    download() {
      
      this.$http.exportSamplingCompletionNew(this.query
      ).then((res) => {
           var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "统计_" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  padding: 20px;
  /deep/ .el-date-editor{
    width: 100%;
  }
}
</style>